<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>">
		<!--[if lte IE 6]></base><![endif]-->
		<title>广东科学技术职业学院考生报到系统>>>>领导</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

			<link href="css/newindex.css" rel="stylesheet" type="text/css" />
			<script src="js/jquery-1.5.js" language="javascript">
</script>
			<script src="js/newpublic.js" language="javascript">
</script>

		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
		<script language="javascript" type="text/javascript"
			src="js/jquery.flot.js">
			
</script>

		<!--                     下面是柱状图所要用到的两个文件         -->

		<script language="javascript" type="text/javascript"
			src="js/Bar-chart.js">
</script>

		<!-- 下面是饼图所要用到的两个文件 -->
		<script type="text/javascript" src="js/jquery.flot.pie.min.js">
</script>
		<script type="text/javascript" src="js/Pie-chart.js">
</script>
		<script src="js/jquery-ui-1.8.5.custom.min.js" language="javascript">
</script>			
<script language="javascript">
function s(s) {
	if(s == 1) {
		$('#t1').css('display','block');
		$('#t2').css('display','none');
	} else {
		$('#t1').css('display','none');
		$('#t2').css('display','block');
	}
	index = s;
	getData(index);
}	

var index;	//当前显示的div	

var registerBarchart = new BarChart();  //报道情况柱状图
var paymentBarchart = new BarChart();  //缴费情况柱状图

var collegeId_register;
var collegeId_payment;


$(function() {
	index = 1;
	initData();  //初始化选择数据
	$("#content").draggable({cancel:".contable"});
	
	$("#collegeList_reg").change(function() {
		collegeId_register = $('#collegeList_reg').val();
		postAndDealRegisterData();
	})
	
	$("#collegeList_pay").change(function() {
		collegeId_payment = $('#collegeList_pay').val();
		postAndDealPaymentData();
	})
	
})

//获取数据
function getData(index) {
	switch(index) {
		case 1:
			postAndDealRegisterData();
			break;
		case 2:
			postAndDealPaymentData();
			break;
	}
}

//初始化选择数据
function initData() {
	$.post("json/professionRegisterPaymentAction!initCollegeName",
			function(data) {
			collegesName_Json = eval("(" + data.collegesName_Json + ")");
			$('#collegeList_reg').empty();
			$('#collegeList_pay').empty();
			for(var a in collegesName_Json) {
				$("#collegeList_reg").append("<option value='" + collegesName_Json[a] + "'>" + a + "</option>");
			}
			for(var a in collegesName_Json) {
				$("#collegeList_pay").append("<option value='" + collegesName_Json[a] + "'>" + a + "</option>");
			}
			collegeId_register = $('#collegeList_reg').val();
			collegeId_payment = $('#collegeList_pay').val();
			
			//开始调用数据更新
			update();
	})
}

//每15秒更新一次数据
var t;
function update() {
	getData(index);
	window.clearTimeout(t);
	t=setTimeout("update()", 15000);
}

//填充报道情况数据
function fillRegisterInfo(data) {
	//徐了第一列外其余td删除
	$("tr#professionName_reg td:gt(0)").remove();
	$("tr#studentCount td:gt(0)").remove();
	$("tr#registeredCount td:gt(0)").remove();
	
	for(var a in data) {
		var td = $("<td align='center' width='"+ 85/data.length +"%'>" + data[a].professionName + "</td>")
		$("#professionName_reg").append(td);
		
		var td = $("<td align='center'>" + data[a].studentCount + "</td>")
		$("#studentCount").append(td);
		
		var td = $("<td align='center'>" + data[a].registeredCount + "</td>")
		$("#registeredCount").append(td);
	}
}

//填充缴费情况数据
function fillPaymentInfo(data) {
	//徐了第一列外其余td删除
	$("tr#professionName_pay td:gt(0)").remove();
	$("tr#totalAmount td:gt(0)").remove();
	$("tr#realAmount td:gt(0)").remove();
	$("tr#paidAmount td:gt(0)").remove();
	$("tr#unPaidAmount td:gt(0)").remove();
	
	for(var a in data) {
		var td = $("<td align='center' width='"+ 83/data.length +"%'>" + data[a].professionName + "</td>")
		$("#professionName_pay").append(td);
		
		var td = $("<td align='center' style='display:none;'>" + format(data[a].totalAmount) + "</td>")
		$("#totalAmount").append(td);
		
		var td = $("<td align='center' style='color: #0C0;'>" + format(data[a].realAmount) + "</td>")
		$("#realAmount").append(td);
		
		var td = $("<td align='center' style='color: #F00;'>" + format(data[a].paidAmount) + "</td>")
		$("#paidAmount").append(td);
		
		var td = $("<td align='center'>" + format(data[a].unPaidAmount) + "</td>")
		$("#unPaidAmount").append(td);
	}
}

//发出请求并处理报道情况数据
function postAndDealRegisterData() {
	$.post("json/professionRegisterPaymentAction!allProfessionRegisterInfo",{'collegeId' : collegeId_register},
			function(data) {
			professionRegisterInfo_Json = eval("(" + data.professionRegisterInfo_Json + ")");
			professionRegisterInfo_Bar = eval("(" + data.professionRegisterInfo_Bar + ")");
			fillRegisterInfo(professionRegisterInfo_Json);
			registerBarchart.buildBarsChart($("#placeholderForBars"), $("#lengendForBars"), professionRegisterInfo_Bar);
	})
}

//发出请求并处理缴费情况数据
function postAndDealPaymentData() {
	$.post("json/professionRegisterPaymentAction!allProfessionPaymentInfo",{'collegeId' : collegeId_payment},
			function(data) {
			professionPaymentInfo_Json = eval("(" + data.professionPaymentInfo_Json + ")");
			professionPaymentInfo_Bar = eval("(" + data.professionPaymentInfo_Bar + ")");
			fillPaymentInfo(professionPaymentInfo_Json);
			paymentBarchart.buildBarsChart($("#placeholderForBars2"), $("#lengendForBars2"), professionPaymentInfo_Bar);
	})
}

//把元化为万
function format(data) {
	data = data * 1.0 / 10000;
    return data.toFixed(2)
}
</script>			

	</head>

	<body onload="fixPNGAll()">
		<div id="bg">
			<div id="bodydiv">
				<div id="bodytitle">
					领导页面
					<div>
						<a href="logoutAction" style="color: #F00;">退出</a>
					</div>
				</div>
				<div id="menudiv">
					<div class="menu">
						<div style="position: relative;">
							<a href="leaderAction"><img src="newimages/l3.png"
									width="48" height="48" border="0" />
								<div>
									学&nbsp;校
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="leaderCollegeAction"><img src="newimages/l1.png"
									width="46" height="47" border="0" />
								<div>
									学&nbsp;院
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="leaderProfessionAction"><img src="newimages/l2.png"
									width="48" height="48" border="0" />
								<div>
									专&nbsp;业
								</div> </a>
						</div>
					</div>
				</div>
				<div id="content">
					<!--当前位置CSS-->
					<div class="top">
						<div class="topleft">
							<div class="dan">
								<div>
									当前位置>领导页面>专业概况
								</div>
							</div>
							<div class="F5">
								<img src="newimages/F5.png" />
							</div>
						</div>
						<div class="topright">
							<div class="toprightmin"></div>
							<div class="toprightmax"></div>
							<div class="toprightclose" onclick="if(confirm('是否确定退出！')){location.replace('loginoutAction')}" title="点击退出"></div>
						</div>
					</div> 
					<!---->
					<!--内容-->
					<div class="condiv">
						<div class="submenu">
							<ul>
								<li>
									<a href="javascript:s(1)">报到情况</a>
								</li>
								<li>
									<a href="javascript:s(2)">缴费情况</a>
								</li>
							</ul>
						</div>
						<div class="contable">
							
							<div id="t1" style="display: block;">
								<div class="title">
									各专业报到情况
								</div>
								
								<table width="80%" border="0" align="center" cellpadding="0"
									cellspacing="5">
									<tr>
										<td height="35">
											学院：
											<select id="collegeList_reg">
												<option value="1">
													计算机学院
												</option>
												<option value="2">
													经管学院
												</option>
												<option value="4">
													人文学院
												</option>
												<option value="3">
													外语学院
												</option>
												<option value="5">
													建工学院
												</option>
												<option value="6">
													机电学院
												</option>
												<option value="7">
													体教部
												</option>
												<option value="8">
													广州学院
												</option>
											</select>
										</td>
									</tr>
									<tr>
										<td style="border-top: 1px red dotted;">
											<table   width="93%" border="0" cellspacing="5" cellpadding="0" >
												<tr id="professionName_reg">
													<td width="17%">
														&nbsp;
													</td>
												</tr>
												<tr id="studentCount">
													<td align="center">
														总人数：
													</td>					
												</tr>
												<tr id="registeredCount">
													<td align="center">
														已报到人数：
													</td>										
												</tr>
											</table>


										</td>
									</tr>
									<tr>
										<td height="44" align="center"
											style="font-size: 18px; text-align: center;">
											各专业报到率对比图
										</td>
									</tr>
									<tr>
										<td align="center">
											<div id="placeholderForBars"
													style="width: 550px; height: 300px; float: left;"></div>
												<div id="lengendForBars" style="float: right; width: 150px"></div>
										</td>
									</tr>
								</table>
							</div>
							<div id="t2" style="display: none;">
								<div class="title">
									各专业缴费情况   <font size="2">单位:万元</font>
								</div>
								<table width="80%" border="0" align="center" cellpadding="0"
									cellspacing="5">

									<tr>
										<td height="34" style="border-bottom: 1px dotted red;">
											学院：
											<select id="collegeList_pay">
												<option value="1">
													计算机学院
												</option>
												<option value="2">
													经管学院
												</option>
												<option value="4">
													人文学院
												</option>
												<option value="3">
													外国语学院
												</option>
												<option value="5">
													建工学院
												</option>
												<option value="6">
													机电学院
												</option>
												<option value="7">
													体教部
												</option>
												<option value="8">
													广州学院
												</option>
											</select>
										</td>
									</tr>
									<tr>
										<td>
											<table width="100%" border="0" cellspacing="4"
												cellpadding="0">
												<tr id="professionName_pay">
													<td align="center" width="17%">
														&nbsp;
													</td>
												</tr>
												
												<tr id="totalAmount" style="display:none;">
													<td align="center">
														总缴费金额：
													</td>
												</tr>
												
												<tr id="realAmount">
													<td align="center">
														应收缴费总额：
													</td>
												</tr>
												
												<tr id="paidAmount">
													<td align="center">
														已缴费金额：
													</td>
												</tr>
												
												<tr id="unPaidAmount">
													<td align="center">
														欠费金额：
													</td>
												</tr>
											</table>
										</td>
									</tr>
									<tr>
										<td height="44" align="center"
											style="font-size: 18px; text-align: center;">
											各专业缴费率对比图
										</td>
									</tr>
									<tr>
										<td align="center">
											<div align="center" >已缴费率 ≈ ( <font style="color: #F00;">已缴费金额</font> / <font style="color: #0C0;">应收缴费总额</font> ) * 100%<br /></div>
											<div id="placeholderForBars2"
													style="width: 550px; height: 300px; float: left;"></div>
												<div id="lengendForBars2" style="float: right; width: 150px"></div>
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="condiv"
						style="width: 997px; position: relative; height: 20px; min-height: 20px; text-align: center;">
						<a href="computer/computer.html" target="_blank">计算机学院程序员之家</a>
					</div>


					<!--低部-->
					<div class="bottom">
						&nbsp;
					</div>
			</div>
		</div>
	</body>
</html>
